<template>
  <div>
    <div class="img_top">
      <img width="100%" height="195.41px" src="../../static/img/page_bg.jpg" />
    </div>
    <div class="about">
      <div class="about_btn">
        <div class="about_mess1">网站首页</div>
        <div class="about_mess2">归档</div>
      </div>
      <P class="about_p">有些的时候，正是为了爱才悄悄躲开。躲开的是身影，躲不开的却是那份默默的情怀。</P>
    </div>
    <div class="about_end">
      <div class="end_left">
        <div class="block">
          <div class="radio">
            <el-radio-group v-model="reverse">
              <el-switch v-model="reverse" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </el-radio-group>
          </div>

          <el-timeline :reverse="reverse">
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="activity.timestamp"
            >{{activity.content}}</el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <div class="end_right">
        <div class="block">
          <el-timeline>
            <el-timeline-item timestamp="2018/4/12" placement="top">
              <el-card>
                <h4>更新 Github 模板</h4>
                <p>王小虎 提交于 2018/4/12 20:46</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2018/4/3" placement="top">
              <el-card>
                <h4>更新 Github 模板</h4>
                <p>王小虎 提交于 2018/4/3 20:46</p>
              </el-card>
            </el-timeline-item>
            <el-timeline-item timestamp="2018/4/2" placement="top">
              <el-card>
                <h4>更新 Github 模板</h4>
                <p>王小虎 提交于 2018/4/2 20:46</p>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      reverse: true,
      activities: [
        {
          content: "2020年"
        },
        {
          content: "2019年"
        },
        {
          content: "2018年"
        },
        {
          content: "2017年"
        },
        {
          content: "2016年"
        }
      ]
    };
  }
};
</script>

<style>
.about {
  width: 80%;
  height: 60px;
  margin-left: 10%;
  background-color: #f6f6f6;
  border-bottom: 1px #000 solid;
}
.about_end {
  width: 80%;
  margin-left: 10%;
  height: 1000px;
  background-color: #f6f6f6;
}
.about_btn {
  position: absolute;
  left: 160px;
  top: 310px;
}
.about_p {
  float: right;
  margin-right: 30px;
  line-height: 40px;
}
.about_mess1 {
  width: 100px;
  height: 40px;
  background-color: #000000;
  float: left;
  line-height: 40px;
  color: #ffffff;
  font-size: 14px;
}
.about_mess2 {
  width: 100px;
  height: 40px;
  background-color: #3a6ab5;
  float: left;
  line-height: 40px;
  color: #ffffff;
  font-size: 14px;
}
.end_left {
  width: 230px;
  height: 380px;
  position: absolute;
  left: 159px;
}
.end_right {
  width: 970px;
  height: 1000px;
  position: absolute;
  right: 160px;
}
.radio {
  margin-bottom: 20px;
  margin-top: 20px;
}
</style>